<!doctype html>

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Backbone integration</title>
	<!-- Backbone's files -->
	<script src="//code.jquery.com/jquery-1.7.1.min.js?v=5.3.10"></script>
	<script src="../common/backbone/underscore.js?v=5.3.10"></script>
	<script src="../common/backbone/backbone.js?v=5.3.10"></script>

	<!-- Scheduler's files -->
	<script src="../../codebase/dhtmlxscheduler.js?v=5.3.10" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_mvc.js?!" type="text/javascript" charset="utf-8"></script>

	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_material.css?v=5.3.10" type="text/css" charset="utf-8">
	<link rel="stylesheet" href="../common/controls_styles.css?v=5.3.10">

	<style type="text/css">
		html,
		body {
			margin: 0px;
			padding: 0px;
			height: 100%;
			overflow: hidden;
		}

		#details {
			height: 135px;
			padding: 15px;
		}

		#details textarea {
			width: 230px;
			height: 50px;
			margin: 10px 0;
		}
	</style>

	<!-- Backbone's template -->
	<script type="text/template" id="details_template">
		<label>Event details</label>
  		<div>
	  		<textarea type="text" id="name_input"><%= obj.text %></textarea>
	  		<div>
		  		<input type="button" id="save_button" value="Save" />
		  		<input type="button" id="delete_button" value="Delete" />
		  		<input type="button" id="add_button" value="Make a copy" />
	  		</div>
  		</div>
	</script>

	<script type="text/javascript" charset="utf-8">
		$(function () {

			MyEvent = Backbone.Model.extend({});
			EventList = Backbone.Collection.extend({
				model: MyEvent,
				url: "./data/backbone.json",
				changeName: function () {
					this.get($$("listA").getSelectedId()).set("name", "NextGen Borg");
				}
			});
			events = new EventList();

			DetailsView = Backbone.View.extend({
				events: {
					"click #save_button": "save",
					"click #add_button": "copy",
					"click #delete_button": "remove"
				},
				initialize: function () {
					this.template = _.template($("#details_template").html());
					this.render();
				},
				render: function () {
					if (this.model)
						this.$el.html(this.template(this.model.toJSON()));
					else
						this.$el.html("<label>Click on any event</label>");
				},
				show: function (model) {
					this.model = model;
					this.render();
					$("#name_input").focus();
				},
				save: function () {
					this.model.set({
						text: $("#name_input").val()
					})
				},
				copy: function () {
					var data = this.model.toJSON();
					data.id = (new Date()).valueOf();

					events.add(new MyEvent(data));
				},
				remove: function () {
					events.remove(this.model);
					this.show();
				}
			});

			details_view = new DetailsView({
				el: $("#details")
			});


			scheduler.xy.margin_top = 150;
			$(".myscheduler").dhx_scheduler({
				date: new Date(2017, 5, 25),
				mode: "month"
			});
			scheduler.attachEvent("onClick", function (id) {
				details_view.show(events.get(id));
			});


			scheduler.backbone(events);
			events.fetch();

		});
	</script>
</head>

<body>
	<div id='details' class='sch_control'></div>
	<div class="myscheduler" style='width:100%; height:100%;'></div>
</body>